<!doctype html>
<html>
<head>
	<meta charset='UTF-8' />
	<style>
		input, textarea {border:1px solid #CCC;margin:0px;padding:0px}

		#body {max-width:800px;margin:auto}
		#log {width:100%;height:400px}
		#message {width:100%;line-height:20px}
	</style>
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="fancywebsocket.js"></script>
	<script>
		var Server;

		$(document).ready(function() {
			log('Connecting...');
			Server = new FancyWebSocket('ws://linkftp.myftp.org:12345');

			//Let the user know we're connected
			Server.bind('open', function() {
				log( "Connected." );
			});

			//OH NOES! Disconnection occurred.
			Server.bind('close', function( data ) {
				log( "Disconnected." );
			});

			//Log any messages sent from server
			Server.bind('message', function( payload ) {
				$("#feedback").val(payload);
				var message = payload.split('||');
				if(message[0]==1)
					log( message[1] );
				else if(message[0]==2){
					var users = "";
					for(i=2;i<2+eval(message[1]);i++)
						users += message[i]+"<br>";
					$("#user_list").html(users);
				}
				
			});

			Server.connect();
		});
		
		function log( text ) {
			$log = $('#log');
			//Add text to log
			$log.append(($log.val()?"\n":'')+text);
			//Autoscroll
			$log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
		}

		function send(event, text) {
			Server.send( 'message', event+"||"+text );
		}
		
		function reg_user(){
			send( 1, $('#user_name').val() );
		}
		
		function send_message(){
			send( 2, $('#message').val() );
			$('#message').val('');
		}
		
		function who(){
			send( 4, $('#user_name').val() );
		}
		
		function get_user_list(){
			send( 3, "" );
		}

	</script>
</head>

<body>
	<div id='body'>
		<textarea id='log' name='log' readonly='readonly'></textarea><br/>
		<input type='text' id='message' name='message' />
		<input type="button" value="send" onclick="send_message()">
		<input type="text" id="feedback">
		ID:<input type="text" id="user_name"><input type="button" value="Register" onclick="reg_user()"><br>
		<input type="button" value="who am i" onclick="who()"><br>
		<div id="user_list"></div>
		<input type="button" value="userlist" onclick="get_user_list()"><br>
		
	</div>
</body>

</html>